<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        form {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        #title > h1 {
            color: #aa0719;
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div id="title">
    <h1>新增商家</h1>
</div>
<hr>
<form class="form-inline">
    <div class="form-group">
        <label for="sname">商家名称</label>
        <input type="text" class="form-control" id="sname" name="sname" placeholder="请输入商家名称"><br>
        <div id="div1" hidden><span id="chectSname"></span></div>
        </span>
        <br>
        <label for="suser">登录名&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input class="form-control" type="text" id="suser" name="suser" placeholder="请输入登录名">
        <br/>
        <div id="div2" hidden><span id="checkSuser"></span></div>
        <br>
        <label for="spwd">密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input class="form-control" type="password" class="form-control" id="spwd" name="spwd" placeholder="请输入密码"><br/><br>
        <label for="spwd1">确认密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input class="form-control" type="password" class="form-control" id="spwd1" name="spwd1"
               placeholder="请确认密码"><br/>
        <div id="div3" hidden><span id="checkSpwd"></span></div>
        <br><br>
        <label for="saddress">商家地址</label>
        <input class="form-control" type="text" id="saddress" name="saddress" placeholder="请输入商家地址"><br/><br>
        <label for="phone">联系方式</label>
        <input class="form-control" type="text" id="phone" name="phone" placeholder="请输入联系方式"><br/><br>
        <label for="stype">商家类别</label><select id="stype" name="stype" class="form-control">
        <option value="0">请选择商家类别</option>
        <option value="1">中餐</option>
        <option value="2">西餐</option>
    </select><br><br>
        <button class="btn btn-info" type="button" id="addbtn" name="addbtn">注册</button>
    </div>
</form>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $(function () {

        var isTrue = false;
        $('#suser').blur(function () {
            if ($('#suser').val() != '') {
                $.getJSON('store.checkAccount', {suser: $('#suser').val()}, function (data) {
                    if (data.code != 200) {
                        isTrue = true;
                        $('#div2').removeAttr('hidden');
                        $('#checkSuser').css('color', 'red');
                        $('#checkSuser').text(data.msg);
                    } else {
                        isTrue = false;
                        $('#div2').removeAttr('hidden');
                        $('#checkSuser').css('color', 'green');
                        $('#checkSuser').text(data.msg);
                    }
                })
            } else {
                layer.msg(123)
            }
        })
        var isRepeat = false;
        $('#sname').blur(function () {
            if ($('#suser').val() != '') {
                $.getJSON('store.checkSname', {sname: $('#sname').val()}, function (data) {
                    if (data.code != 200) {
                        isRepeat = true;
                        $('#div1').removeAttr('hidden');
                        $('#chectSname').css('color', 'red');
                        $('#chectSname').text(data.msg);
                    } else {
                        isRepeat = false;
                        $('#div1').removeAttr('hidden');
                        $('#chectSname').css('color', 'green');
                        $('#chectSname').text(data.msg);
                    }
                })
            }
        })
        var isOk = false;
        $('#spwd1').blur(function () {
            if ($('#spwd').val() != $('#spwd1').val()) {
                isOk = true;
                $('#div3').removeAttr('hidden');
                $('#cautionpwd').css('color', 'red');
                $('#cautionpwd').text('两次密码输入不一致');
            } else {
                isOk = false;
                $('#div2').attr('hidden', 'hidden');
            }
        })

        $('#addbtn').click(function () {
            if ($('#sname').val().trim() == '' || $('#spwd').val().trim() == '' || $('#spwd1').val().trim() == '') {
                layer.msg("请输入完整信息");
                return;
            }
            if (isTrue || isOk || isRepeat) {
                layer.msg("新增失败");
                return;
            }
            $.post('store.register', {
                sname: $('#sname').val(),
                suser: $('#suser').val(),
                spwd: $('#spwd').val(),
                saddress: $('#saddress').val(),
                phone: $('#phone').val(),
                stype: $('#stype').val()
            }, function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 1, time: 2000}, function () {
                        location.href = "Managermain.html";
                    })
                } else {
                    layer.msg(data.msg);
                }
            }, 'json')
        })
    })
</script>
</html>